<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="renderer" content="webkit">
		<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
		<title>蒲江现代农业产业园综合服务平台</title>
		<link rel="stylesheet/less" type="text/css" href="./css/less/style.less">
	</head>

	<body class="color_f scroll">

		<div class="layui-row">
			<div class="header">
				<a href="./produce.html" class="swl fl cp ft12">
					农业生产
				</a>
				<a href="./operate.html" class="swl fl cp ft12">
					产业经营
				</a>
				<h1 class="fl bt ft28"><a class="color_f" href="./index.html">蒲江现代农业产业园综合服务平台</a></h1>
				<a href="./manage.html" class="swr fl cp ft12">
					综合管理
				</a>
				<a href="./service.html" class="swr fl cp ft12">
					应用服务
				</a>
			</div>
		</div>

		<div class="layui-row">
			<h1>&nbsp;&nbsp;&nbsp;&nbsp;县域冻库信息<i class="fa fa-angle-double-right fa-fw fa-setCol"></i></h1>
		</div>

		<div class="layui-row">
			<div class="layui-fluid">
				<div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
					<div class="layui-tab-content">
						<!-- 列表清单 -->
						<div class="layui-tab-item layui-show">
							<div class="layui-row">
								<ul class="listBox frozenBox" id="content0"></ul>
							</div>
							<div class="layui-row">
								<div class="page-row">
									<div id="pagenation0"></div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>

	</body>
	<script type="text/html" id="tmpList">
		<li class="frozenHead">
			{{# layui.each(d.head, (index, item) => { }}
			<span class="{{index==0?'layui-col-md2 first-span head-ft':index==9?'layui-col-md2':'layui-col-md1'}}">{{item}}</span>
			{{# }); }}
		</li>
		{{# layui.each(d.list, (index, item) => { }}
		<li class="showbox" data-method="notice" data-id="{{item.id}}">
			<span class="layui-col-md2 first-span"><span class="order">{{item.serial+1}}.</span>{{item.title}}</span>
			<span class="layui-col-md1">{{item.township}}</span>
			<span class="layui-col-md1">{{item.address}}</span>
			<span class="layui-col-md1">{{item.quantity}}</span>
			<span class="layui-col-md1">{{item.refriger}}</span>
			<span class="layui-col-md1">{{item.capacity}}</span>
			<span class="layui-col-md1">{{item.construct}}</span>
			<span class="layui-col-md1">{{item.cooperation}}</span>
			<span class="layui-col-md1">{{item.contacts}}</span>
			<span class="layui-col-md2">{{item.contel}}</span>
		</li>
		{{# }); }}
	</script>
	<script src="https://cdn.bootcss.com/less.js/3.9.0/less.min.js"></script>
	<script src="./layui/layui.js"></script>
	<script src="./js/http.js"></script>
	<script src="./js/app.js"></script>
	<script>
		layui.use(["layer"], function() {
			var $ = layui.jquery;

			//构建模板
			var setlayTpl = function(mod, id, tpl, data) {
				layui.use([mod, "layer"], function() {
					var laytpl = layui.laytpl;
					var htmltpl = $(tpl).html()
					var view = document.getElementById(id);
					laytpl(htmltpl).render(data, function(html) {
						view.innerHTML = html;
					});
				});
			}

			//设置分页
			var setPagenation = function(mod, target, size, data, id, tpl) {
				layui.use(mod, function() {
					var laypage = layui.laypage
					laypage.render({ //动态分页
						elem: target,
						count: data.list.length,
						limit: size,
						prev: '<em><i class="fa fa-angle-double-left fa-fw"></i></em>',
                        next: '<em><i class="fa fa-angle-double-right fa-fw"></i></em>',
						jump: function(obj) {
							var thisData = data.list.concat().splice(obj.curr * obj.limit - obj.limit, obj.limit);
							var pages = {
								head: data.headArr,
								list: thisData
							};
							setlayTpl("laytpl", id, tpl, pages)
						}
					});

				})
			}

			//构建模板需要的数据模型
			var buildMode = function(json) {
				var data = {},
					count = -1;
				$.getJSON(json, function(res) {
					data.list = []
					data.headArr = ["归属企业", "乡镇", "地址", "冻库数量", "制冷方式", "容量（吨）", "修建时间", "合作电商", "联系人", "联系电话"]
					$.each(res.list, function(index, item) {
						count += 1
						var obj = {
							id: "list" + count,
							serial: count,
							title: item.title,
							township:item.title,
							address: item.title,
							quantity: item.title,
							refriger: item.title,
							capacity: item.title,
							construct: item.title,
							cooperation: item.title,
							contacts: item.title,
							contel: item.title
						}
						data.list.push(obj)
					});
					console.log(data)
					setPagenation("laypage", "pagenation0", 10, data, "content0", "#tmpList")
				})
			}

			buildMode("./data/data.json")

		})
	</script>

</html>